<template>
  <div class="flow-content">
    <JishanFlow :nodeComs="nodeComs" :nodeData="nodeData" :edgeCfg="edgeCfg" />
  </div>
</template>

<script>
import JishanFlow from "@/components/JishanFlow/index.vue";
export default {
  components: { JishanFlow },
  data() {
    return {
      nodeComs: [
        {
          nodeName: "CustomNode",
        },
      ],
      nodeData: [
        {
          shape: "CustomNode",
          id: "node1",
          x: -5,
          y: 0,
          data: {
            title: "自定义节点1",
            footer: "底部信息1",
            status: "sucess",
            width: 160,
            height: 95,
          },
          width: 160,
          height: 95,
        },
        {
          shape: "CustomNode",
          id: "node2",
          x: 0,
          y: 200,
          data: {
            title: "自定义节点2",
            footer: "底部信息2",
            status: "sucess",
            width: 150,
            height: 95,
          },
          width: 150,
          height: 95,
        },
        {
          shape: "CustomNode",
          id: "node3",
          x: -150,
          y: 400,
          data: {
            title: "自定义节点3",
            footer: "底部信息3",
            status: "sucess",
            width: 150,
            height: 95,
          },
          width: 150,
          height: 95,
        },
        {
          shape: "CustomNode",
          id: "node4",
          x: 150,
          y: 400,
          data: {
            title: "自定义节点4",
            footer: "底部信息4",
            status: "error",
            width: 150,
            height: 95,
          },
          width: 150,
          height: 95,
        },
      ],
      edgeCfg: [
        {
          source: "node1", // 起始节点的 ID
          target: "node2", // 目标节点的 ID
          attrs: {
            line: {
              stroke: "#52c41a",
              strokeDasharray: 5,
              targetMarker: "classic",
              style: {
                animation: "ant-line 30s infinite linear",
              },
            },
          },
        },
        {
          source: {
            cell: "node2",
            port: "out-left",
          },
          target: {
            cell: "node3",
            port: "in-top",
          },
          router: {
            name: "manhattan", // 使用 manhattan 路由策略 - 连线是横向竖向的
          },
          attrs: {
            line: {
              stroke: "#52c41a", // 连接线颜色
              strokeWidth: 2, // 连接线宽度
            },
          },
        },
        {
          source: {
            cell: "node2",
            port: "out-right",
          },
          target: {
            cell: "node4",
            port: "in-top",
          },
          router: {
            name: "manhattan", // 使用 manhattan 路由策略
          },
          attrs: {
            line: {
              stroke: "red", // 连接线颜色
              strokeWidth: 2, // 连接线宽度
            },
          },
        },
      ],
    };
  },
  computed: {
    flowConfig() {
      return [];
    },
  },
};
</script>

<style>
@keyframes ant-line {
  to {
    stroke-dashoffset: -1000;
  }
}
</style>

<style lang="scss" scoped>
.flow-content {
  width: 100%;
  height: 100%;
}
</style>
